<template>
    <!-- 使用Element Plus的el-row组件进行布局 -->
    <el-row type="flex" justify="center" style="align-content: center;height: 100%;margin-top: 2%">
        <!-- 使用表单组件，并且绑定数据模型ruleForm和验证规则rules -->
        <el-form ref="ruleFormRef" style="width: 40%;" :model="ruleForm" :rules="rules" label-width="auto"
                 :size="formSize" status-icon :label-position="labelPosition">
            <!-- 扫码支付模块，当isCreate为true时显示 -->
            <el-form-item label="扫码支付" v-show="isCreate">
                <!-- 使用vue-qrcode生成二维码，绑定url作为二维码内容 -->
                <vue-qrcode :value="url" :width="200" :color-dark="'#000000'" :color-light="'#ffffff'"/>
            </el-form-item>
            <!-- 选择充值金额，给用户提供多个选择 -->
            <el-form-item label="选择金额">
                <el-radio-group v-model="payment" size="large">
                    <el-radio-button label="50" value=50></el-radio-button>
                    <el-radio-button label="100" value=100></el-radio-button>
                    <el-radio-button label="150" value=150></el-radio-button>
                    <el-radio-button label="200" value=200></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <!-- 自定义金额模块，将用户输入内容绑定到ruleForm.money -->
            <el-form-item label="自定义金额" prop="money">
                <el-input v-model="ruleForm.money" style="width: 100%" :rows="10" type="text" number/>
            </el-form-item>
            <!-- 确认支付按钮 -->
            <el-form-item>
                <el-row style="width: 100%; align-content: center;margin-top: 5%;" justify="center">
                    <el-col :span="14">
                        <!-- 为button绑定click事件，通过submitForm方法将表单中的信息进行提交 -->
                        <el-button style="background-color: #fbaf5a; color: white; width: 100%;height: 40px;"
                                   @click="submitForm">立即支付
                        </el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-row>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {ElMessage, ComponentSize, FormInstance, FormRules} from 'element-plus';
import type {FormProps} from 'element-plus';
import {userInfoStore} from '../assets/userStore/userStore';
import {UserModel} from '../assets/models/User';


// 定义表单标签位置,将表单标签位于顶部
const labelPosition = ref<FormProps['labelPosition']>('top')
// 获取用户信息存储实例
const userStore = userInfoStore();
// 控制是否显示扫码支付项, 初始值为false, 不显示扫码支付项
const isCreate = ref(false);
// 用于生成二维码的URL
const url = ref<string>('');
// 用户选择的支付金额
const payment = ref<number>();
// 表单大小
const formSize = ref<ComponentSize>('large');
// 表单引用
const ruleFormRef = ref<FormInstance>()
// 表单数据模型，绑定用户ID和支付金额
const ruleForm = reactive<UserModel>({
    id: userStore.id,
    money: 0
})

// 表单验证规则，确保支付金额在有效范围内
const rules = reactive<FormRules<UserModel>>({
    money: [
        {
            // 必填项
            required: true,
            // 提示信息
            message: 'Please input Activity name',
            // 失焦时触发
            trigger: 'blur'
        }, {
            // 最小值
            min: 1,
            // 最大值
            max: 3,
            // 提示信息
            message: '单次充值金额不得小于等于0元，不得超过1000元',
            // 失焦时触发
            trigger: 'blur'
        }
    ]
})

// 提交表单处理函数
const submitForm = () => {
    // 如果已经选择了金额并且在自定义金额中未输入任何信息，将选择的金额赋值给ruleForm.money并生成二维码URL
    if (payment.value && !ruleForm.money) {
        ruleForm.money = payment.value;
        url.value = `http://10.153.140.26:5173/#/pay?id=${userStore.id}&phone=${userStore.phoneNumber}&money=${ruleForm.money}`;
        // 显示扫码支付项
        isCreate.value = true;
        // 提示付款码显示成功信息
        ElMessage.success('付款码生成成功');
        // 如果未选择金额但输入了自定义金额，直接生成二维码URL
    } else if (!payment.value && ruleForm.money) {
        // 显示扫码支付项
        isCreate.value = true;
        // 提示付款码显示成功信息
        ElMessage.success('付款码生成成功');
        // 如果既未选择金额也未输入自定义金额，需要提示用户付款码生成失败
    } else if (!payment.value && !ruleForm.money) {
        // 错误信息提示
        ElMessage.error('付款码生成失败');
    }
}
</script>


<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}


.header_register {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}
</style>